import React, { Component } from 'react';
// import { Route, Switch, Redirect } from 'react-router-dom';
import GlobalNav from '@/components/base/GlobalNav';
import Footer from '@/components/base/Footer';
import { Link } from 'react-router-dom';
import './Kind.scss';
class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      minheight:true,
      minheight1:true,
      minheight2:true,
      minheight3:true
    }
  }
  bigstyle () {
    this.setState({
      minheight:!this.state.minheight
    })
  }
  bigstyle1 () {
    this.setState({
      minheight1:!this.state.minheight1
    })
  }
  bigstyle2 () {
    this.setState({
      minheight2:!this.state.minheight2
    })
  }
  bigstyle3 () {
    this.setState({
      minheight3:!this.state.minheight3
    })
  }
  render () {
    const styleCss = {
      height:(this.state.minheight) ? '200px' : '390px'
    }
    const styleCss1 = {
      height:(this.state.minheight1) ? '200px' : '390px'
    }
    const styleCss2 = {
      height:(this.state.minheight2) ? '200px' : '390px'
    }
    const styleCss3 = {
      height:(this.state.minheight3) ? '200px' : '390px'
    }
    return (
      <div className = "container">
        <div className="header">
          <GlobalNav />
         </div>
        <div className="section">
          <div className="Kind_Header">
              分类浏览
          </div>
          <div className="Kind_main">
            <div className="Kind_main_speical" style={styleCss}>
                <b>热门专题</b>
                <div className="Kind_main_ul">
                    <ul>
                      <li className="Kind_main_li">特色食品</li>
                      <li><Link to="">小吃</Link></li>
                      <li><Link to="">酱</Link></li>
                      <li><Link to="">沙拉</Link></li>
                      <li><Link to="">凉菜</Link></li>
                    </ul>
                    <ul>
                      <li className="Kind_main_li">特殊场合</li>
                      <li><Link to="">早餐</Link></li>
                      <li><Link to="">下午茶</Link></li>
                      <li><Link to="">便当</Link></li>
                      <li><Link to="">圣诞节</Link></li>
                    </ul>
                    <ul>
                      <li className="Kind_main_li">菜式</li>
                      <li><Link to="">家常菜</Link></li>
                      <li><Link to="">快手菜</Link></li>
                      <li><Link to="">下饭菜</Link></li>
                      <li><Link to="">素菜</Link></li>
                      <li><Link to="">大鱼大肉</Link></li>
                      <li><Link to="">下酒菜</Link></li>
                    </ul>
                    <ul>
                      <li className="Kind_main_li">功效</li>
                      <li><Link to="">减肥</Link></li>
                      <li><Link to="">美容</Link></li>
                      <li><Link to="">润肺抗燥</Link></li>
                    </ul>
                    <ul>
                      <li className="Kind_main_li">人群</li>
                      <li><Link to="">儿童</Link></li>
                      <li><Link to="">婴幼儿</Link></li>
                      <li><Link to="">老人</Link></li>
                    </ul>
                    <em className="iconfont icon-triangle-bottom"><span onClick={this.bigstyle.bind(this)} >展开全部</span></em>
                </div>
                
            </div>
            <div className="Kind_main_speical" style={styleCss1}>
                <b>洪培甜品饮料</b>
                <div className="Kind_main_ul">
                    <ul>
                      <li><Link to="">洪培</Link></li>
                      <li><Link to="">蛋糕</Link></li>
                      <li><Link to="">面包</Link></li>
                      <li><Link to="">饼干</Link></li>
                      <li><Link to="">吐司</Link></li>
                      <li><Link to="">乳酪蛋糕</Link></li>
                      <li><Link to="">曲奇</Link></li>
                    </ul>
                    <ul>
                      <li><Link to="">甜品</Link></li>
                      <li><Link to="">布丁</Link></li>
                      <li><Link to="">冷饮</Link></li>
                      <li><Link to="">果酱</Link></li>
                      <li><Link to="">糖水</Link></li>
                      <li><Link to="">冰淇淋</Link></li>
                      <li><Link to="">果冻</Link></li>
                    </ul>
                    <ul>
                      <li><Link to="">饮品</Link></li>
                      <li><Link to="">咖啡</Link></li>
                      <li><Link to="">豆浆</Link></li>
                      <li><Link to="">奶茶</Link></li>
                      <li><Link to="">酒</Link></li>
                      <li><Link to="">果汁</Link></li>
                      <li><Link to="">花草茶</Link></li>
                    </ul>
                   
                    <em className="iconfont icon-triangle-bottom"><span onClick={this.bigstyle1.bind(this)} >展开全部</span></em>
                </div>
                
            </div>
            <div className="Kind_main_speical" style={styleCss2}>
                <b>肉类</b>
                <div className="Kind_main_ul">
                    <ul>
                      <li><Link to="">猪</Link></li>
                      <li><Link to="">猪肉</Link></li>
                      <li><Link to="">排骨</Link></li>
                      <li><Link to="">猪肉末</Link></li>
                      <li><Link to="">五花肉</Link></li>
                      <li><Link to="">猪蹄</Link></li>
                      <li><Link to="">肉丝</Link></li>
                      <li><Link to="">肋排</Link></li>
                      <li><Link to="">瘦肉</Link></li>
                    </ul>
                    <ul>
                      <li><Link to="">鸡</Link></li>
                      <li><Link to="">鸡翅</Link></li>
                      <li><Link to="">鸡胸</Link></li>
                      <li><Link to="">鸡腿</Link></li>
                      <li><Link to="">鸡翅中</Link></li>
                      <li><Link to="">鸡腿肉</Link></li>
                      <li><Link to="">鸡爪</Link></li>
                    </ul>
                    <ul>
                      <li><Link to="">牛</Link></li>
                      <li><Link to="">牛肉</Link></li>
                      <li><Link to="">牛腩</Link></li>
                      <li><Link to="">牛排</Link></li>
                      <li><Link to="">肥牛</Link></li>
                      <li><Link to="">牛里脊</Link></li>
                      <li><Link to="">牛腱</Link></li>
                    </ul>
                   
                    <em className="iconfont icon-triangle-bottom"><span onClick={this.bigstyle2.bind(this)}>展开全部</span></em>
                </div>
                
            </div>
            <div className="Kind_main_speical" style={styleCss3}>
                <b>蔬菜水果</b>
                <div className="Kind_main_ul">
                    <ul>
                      <li className="Kind_main_li">果实类蔬菜</li>
                      <li><Link to="">彩椒</Link></li>
                      <li><Link to="">番茄</Link></li>
                      <li><Link to="">南瓜</Link></li>
                      <li><Link to="">玉米</Link></li>
                      <li><Link to="">红椒</Link></li>
                      <li><Link to="">茄子</Link></li>
                      <li><Link to="">黄瓜</Link></li>
                      <li><Link to="">玉米粒</Link></li>
                    </ul>
                    <ul>
                      <li className="Kind_main_li">根茎蔬菜</li>
                      <li><Link to="">土豆</Link></li>
                      <li><Link to="">萝卜</Link></li>
                      <li><Link to="">紫薯</Link></li>
                      <li><Link to="">红薯</Link></li>
                      <li><Link to="">胡萝卜</Link></li>
                      <li><Link to="">山药</Link></li>
                      <li><Link to="">藕</Link></li>
                      <li><Link to="">芋头</Link></li>
                    </ul>
                    <ul>
                      <li className="Kind_main_li">叶类蔬菜</li>
                      <li><Link to="">芹菜</Link></li>
                      <li><Link to="">白菜</Link></li>
                      <li><Link to="">韭菜</Link></li>
                    </ul>
                    <ul>
                      <li className="Kind_main_li">菌菇类</li>
                      <li><Link to="">香菇</Link></li>
                      <li><Link to="">杏鲍菇</Link></li>
                      <li><Link to="">银耳</Link></li>
                    </ul>
                    
                    <em className="iconfont icon-triangle-bottom"><span onClick={this.bigstyle3.bind(this)}>展开全部</span></em>
                </div>
                
            </div>
            
          </div>
          
        
        </div>
        <div className="foot">
          <Footer />
        </div>
      </div>
    )
  }
}

export default Com;
